<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片维护</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<!-- 引入global.js -->
<script type="text/javascript" src="js/global.js"></script>
</head>
<body>
    <table id="pictureTable" lay-filter="picture"></table>
	
	<!-- 定义一个行内工具栏模块  lay-event : 定义了一个事件 -->
	<script type="text/html" id="rowToolbar">
		<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
	</script>

	<from action="#">
	   <input type="hidden" id="productId" name="productId" value="1">
	   
	   <div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>图片
				</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="mainpicbtn">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
		</div>
		<!-- 存储上传产品主图的地址 -->
		<input type="hidden" id="mainpic" name="mainpic">
		<div id="mainpicdiv">
				<img alt="" src="" width="100px" height="100px" id="mainShow">
		</div>
	   
	</from>
</body>
<script type="text/javascript">
		//引入layUI的table模块（组件）
		layui.use(['table','upload'],function(){
			//定义变量table来接口layui的tabe组件
			var table = layui.table;
			var upload = layui.upload;
			var $ = layui.$;//加载JQuery组件
			
			//渲染表格，显示用户信息
			table.render({
				elem:'#pictureTable',//根据ID指定要渲染的表格
				url:'PictureServlet?url=picList',//指定获取表格数据调用的接口地址
				method:'post',//指定请求接口的方法为post方式
				//token : 就是访问接口的令牌，后台接口会根据token的有效性来判断用户是否是正常登录状态
				where:{
					'token':globalData.myToken,
					'productId':$("#productId").val()
					},//定义调用接口的入参
				//把接口返回的信息，展示到表格中
				//定义数据展示的格式
				cols:[
					[
						{field:'id',title:'图片ID',width:100,sort:true,fixed:'left'},
						{field:'picurl',title:'图片',width:150,templet:'<div><img src="{{d.picurl}}" width=36 height=36></div>'},
						
						{title:'操作',width:240,toolbar:'#rowToolbar',fixed:'right'}
					]
				],
				page:true,//添加分页，加上这个属性之后，我们的数据表格会有分页的功能
				id:'pictureTableReload' //给渲染表格的语句块添加一个id
			});
			
			//讲刷新表格数据的操作抽取出来封装成给一个动作，这样就可以多次调用
			// reload : 动作的名字，动作本质其实就是一个函数
			//根据用户数据的查询条件，重新加载表格中的数据
			active = {
				reload:function(){
					var productId = $("#productId").val();//产品Id
					//调用table组件的reload方法
					table.reload('pictureTableReload',{
						//将用户输入的参数传给接口
						where:{
							'productId':productId,
							
							'token':globalData.myToken
						}
					});
					
				}
			}
			
			//执行实列
			var uploadInst = upload.render({
				elem : '#mainpicbtn',//绑定元素
				url : './PictureServlet?url=add&productId='+$("#productId").val(),//上传接口 
				done : function(res){
					//上传完毕回调
					if(res.success == true){
						//回显图片	
					    $('#mainShow').attr("src","productpic/" + res.remark);
						//将后台返回的图片地址设置到隐藏域中
						$("#mainpic").val("productpic/" + res.remark);
						layer.msg("图片上传成功！");
						//手动调用reload动作，实现表格的刷新
						active['reload'].call(this);
					}
				},
				error : function(){
					//请求异常
					layer.msg("请求异常");
				}
			});
			table.on('tool(picture)',function(obj){
				//obj.data -- 获取用户点击的这一行的产品信息
				var data = obj.data;
			//判断用户点击的是哪个按钮
			if(obj.event == "del"){
				//点击的删除按钮
				layer.confirm('确定要删除 【 '+ data.id +' 】 图片吗？',function(index){
					//用户如果点击了确定，要执行的操作
					//layer.msg('删除');
					//实现删除产品的代码
					//定义删除产品接口地址
					var del_url = "PictureServlet?url=del";
					//定义接口的入参
					var param = {'token':globalData.myToken,'productId':data.id};
					//调用的删除用户的接口
					$.post(del_url,param,function(res){
						//处理接口返回结果
						if(res.success == true){
							layer.msg("用户删除成功");
							//手动调用reload动作，实现表格的刷新
							active['reload'].call(this);
							
						}else{
							layer.msg("用户删除失败");
						}
						
					},'json');
					
				});
			}
		});
	});
 </script>
</html>